<template>
  <div id="flight-refund-order-detail" class="card col-12 px-0 mt-5">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb">
        <li class="breadcrumb-item ms-1">
          <router-link to="/h5/flt/refund/orders">退票单</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">详情</li>
        <span class="ms-auto me-1" @click.stop="back()">返回</span>
      </ol>
    </nav>
    <template v-if="detail !== null">
      <ul class="nav nav-tabs nav-bordered mb-3" id="myTab" role="tablist">
        <li class="nav-item">
          <a
            class="nav-link active"
            id="order-tab"
            data-bs-toggle="tab"
            href="#orderDetailTab"
            role="tab"
            aria-controls="home"
            aria-selected="true"
            >退票单信息</a
          >
        </li>
        <li
          class="nav-item"
          v-if="detail !== null && detail.smsDetails.length > 0"
        >
          <a
            class="nav-link"
            id="sms-tab"
            data-bs-toggle="tab"
            href="#smsDetailTab"
            role="tab"
            aria-controls="sms"
            aria-selected="false"
            >短信({{ detail.smsDetails.length }})</a
          >
        </li>
      </ul>
      <div class="tab-content" id="myTabContent">
        <div
          class="tab-pane fade show active"
          id="orderDetailTab"
          role="tabpanel"
          aria-labelledby="order-tab"
          v-if="detail !== null"
        >
          <dl class="row">
            <dt class="col-4 text-end">公司名称</dt>
            <dd class="col-8">
              <template v-if="detail.customerType === 0">散客</template>
              <template v-else-if="detail.customer !== null">{{
                detail.customer.vipName
              }}</template>
            </dd>
            <dt class="col-4 text-end">退票单号</dt>
            <dd class="col-8">{{ detail.refundOrderNo }}</dd>
            <dt class="col-4 text-end">票号</dt>
            <dd class="col-8">
              {{ detail.balanceCode }}-{{ detail.ticketNo }}
            </dd>
            <dt class="col-4 text-end">编码</dt>
            <dd class="col-8">{{ detail.pnrNo }}</dd>
          </dl>
          <div class="card-body bg-primary text-white m-0 p-0">乘客信息</div>
          <table class="table table-striped table-hover table-sm">
            <thead>
              <tr>
                <th>乘客</th>
                <th>证件号</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{{ detail.psgName }}</td>
                <td>{{ detail.idNo }}</td>
              </tr>
            </tbody>
          </table>
          <div class="card-body bg-primary text-white m-0 p-0">航班信息</div>
          <table class="table table-striped table-hover table-sm">
            <thead>
              <tr>
                <th>出发</th>
                <th>到达</th>
                <th>日期</th>
                <th>航班</th>
                <th class="d-none d-md-table-cell">起飞</th>
                <th class="d-none d-md-table-cell">落地</th>
                <th>舱位</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="info in detail.flights" :key="info.id">
                <td>
                  {{ info.dport }}
                  <span class="d-none d-md-table-cell"
                    >{{ info.dportName }} {{ info.aterm }}</span
                  >
                </td>
                <td>
                  {{ info.aport }}
                  <span class="d-none d-md-table-cell"
                    >{{ info.aportName }} {{ info.aterm }}</span
                  >
                </td>
                <td>{{ info.ddate }}</td>
                <td>{{ info.flightNo }}</td>
                <td class="d-none d-md-table-cell">{{ info.dtime }}</td>
                <td class="d-none d-md-table-cell">{{ info.atime }}</td>
                <td>{{ info.subclass }}</td>
              </tr>
            </tbody>
          </table>
          <div class="card-body bg-primary text-white m-0 p-0">金额信息</div>
          <table class="table table-striped table-hover table-sm">
            <thead>
              <tr>
                <th>退票费</th>
                <th>服务费</th>
                <th>航司实退</th>
                <th>实退客人</th>
                <th>利润</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{{ detail.airRefundCharge }}</td>
                <td>{{ detail.serviceCharge }}</td>
                <td>
                  <template v-if="detail.airRefundStatus === 1">
                    {{ detail.airlineRefundAmountFinal }}
                  </template>
                  <template v-else>
                    <span class="small text-danger">未退</span>
                  </template>
                </td>
                <td>
                  <template v-if="detail.passengerRefundAmount === null">
                    <span class="text-danger">预退</span>
                    {{ psgAmount0 }}
                  </template>
                  <template v-else>
                    <strong>{{ detail.passengerRefundAmount }}</strong>
                  </template>

                  <template v-if="detail.status === 2 || detail.status === 8">
                    <a
                      href="javascript:void(0)"
                      @click.stop="setRefundPsgAmount()"
                      >修改</a
                    >
                  </template>
                </td>
                <td>
                  <template
                    v-if="
                      detail.passengerRefundAmount > 0 &&
                      detail.airlineRefundAmount > 0
                    "
                  >
                    <strong>{{
                      calcProfit2(
                        detail.airlineRefundAmount,
                        detail.passengerRefundAmount
                      )
                    }}</strong>
                  </template>
                  <template v-else>{{ calcProfit(detail) }}</template>
                </td>
              </tr>
            </tbody>
          </table>
          <dl class="row">
            <dt class="col-4 text-end">退废</dt>
            <dd class="col-8">
              {{ getReasonCodeDesc(detail.reasonCode) }}
              <span class="text-danger" v-if="detail.intlTicket === 1"
                >国际</span
              >
              <span v-else>国内</span>
            </dd>
            <dt class="col-4 text-end">销售价</dt>
            <dd class="col-8">{{ detail.parvalue }}</dd>
            <dt class="col-4 text-end">税</dt>
            <dd class="col-8">{{ detail.tax }}</dd>
            <dt class="col-4 text-end">成本</dt>
            <dd class="col-8">{{ detail.cost }}</dd>
            <dt class="col-4 text-end">实收</dt>
            <dd class="col-8">{{ detail.ticketAmount }}</dd>

            <dt class="col-4 text-end">操作员</dt>
            <dd class="col-8">{{ detail.operator }}</dd>
            <dt class="col-4 text-end">状态</dt>
            <dd class="col-8">
              {{ showRefundOrderStatus(detail.status) }}
              <span class="small text-primary" v-if="detail.payStatus === 2"
                >已销</span
              >
            </dd>
            <dt class="col-4 text-end">航司预退</dt>
            <dd class="col-8">
              <template v-if="detail.airlineRefundAmount === null">
                <span class="text-danger">预退</span>
                {{ airAmount0 }}
              </template>
              <template v-else>
                <strong>{{ detail.airlineRefundAmount }}</strong>
              </template>

              <template v-if="detail.status === 2 || detail.status === 16">
                <a
                  href="javascript:void(0)"
                  @click.stop="setRefundAirlineAmount()"
                  >修改</a
                >
              </template>
            </dd>

            <!-- <dt class="col-4 text-end">原订单号</dt>
            <dd class="col-8">{{detail.orderNo}}</dd>
            <dt class="col-4 text-end">收款方式</dt>
            <dd class="col-8">{{showPayType(detail.payType)}}</dd>
            <dt class="col-4 text-end">收款备注</dt>
            <dd class="col-8">{{detail.payRemark}}</dd>
            <dt class="col-4 text-end">供应商</dt>
            <dd class="col-8">
              <template v-if="detail.supplier !== null">{{detail.supplier.name}}</template>
            </dd>
            <dt class="col-4 text-end">支付方式</dt>
            <dd class="col-8">
              <template v-if="detail.paymentMethod !== null">{{detail.paymentMethod.name}}</template>
            </dd>
             -->
            <dt class="col-4 text-end">提交航司</dt>
            <dd class="col-8">{{ detail.submitDate }}</dd>
            <dt class="col-4 text-end">航司退款日期</dt>
            <dd class="col-8">{{ detail.airlineRefundDate }}</dd>
            <dt class="col-4 text-end">退给乘客日期</dt>
            <dd class="col-8">{{ detail.psgRefundDate }}</dd>
            <dt class="col-4 text-end">提交时间</dt>
            <dd class="col-8">{{ detail.createTime }}</dd>
            <dt class="col-4 text-end">关联单</dt>
            <dd class="col-8">
              <router-link :to="`/h5/flt/order/0?orderNo=` + detail.orderNo">
                {{ detail.orderNo }}</router-link
              >
            </dd>
          </dl>
          <div class="card-body">备注: {{ detail.remark }}</div>
          <div class="card-body d-flex flex-row justify-content-around">
            <template v-if="detail.status === 0">
              <button
                class="btn btn-danger btn-sm me-auto"
                @click.stop="cancelRefund()"
              >
                取消
              </button>
              <button
                class="btn btn-info btn-sm ms-auto me-auto"
                @click.stop="editPrice()"
              >
                修改价格
              </button>
              <button
                class="btn btn-sm btn-primary"
                @click.stop="processRefund(detail.id)"
              >
                我来处理
              </button>
            </template>
            <template v-else-if="detail.status === 1">
              <button
                class="btn btn-danger btn-sm"
                @click.stop="cancelRefund()"
              >
                取消
              </button>
              <button
                class="btn btn-info btn-sm ms-auto me-auto"
                @click.stop="editRemark()"
              >
                修改备注
              </button>
              <button
                class="btn btn-info btn-sm ms-auto me-auto"
                @click.stop="editPrice()"
              >
                修改价格
              </button>
              <button
                class="btn btn-sm btn-primary"
                @click.stop="setRefundSubmitted(detail.id)"
              >
                已提交
              </button>
            </template>
            <template v-else-if="detail.status === 2">
              <button
                class="btn btn-danger btn-sm"
                @click.stop="cancelRefund()"
              >
                取消
              </button>
              <button
                class="btn btn-info btn-sm ms-auto me-auto"
                @click.stop="editRemark()"
              >
                修改备注
              </button>
              <button
                class="btn btn-sm btn-danger ms-auto me-auto"
                @click.stop="setRefundAirlineDone()"
              >
                航司预退
              </button>
              <button
                class="btn btn-sm btn-danger ms-auto me-auto"
                @click.stop="setRefundPassengerDone()"
              >
                已退客人
              </button>
            </template>
            <template v-else-if="detail.status === 4">
              <button
                class="btn btn-danger btn-sm ms-2"
                @click.stop="reopenRefund()"
                v-if="isAdmin"
              >
                重新打开
              </button>
            </template>
            <template v-else-if="detail.status === 8">
              <button
                class="btn btn-info btn-sm ms-auto me-auto"
                @click.stop="editRemark()"
              >
                修改备注
              </button>
              <button
                class="btn btn-sm btn-danger ms-auto me-auto"
                @click.stop="setRefundPassengerDone()"
              >
                已退客人
              </button>
            </template>
            <template v-else-if="detail.status === 16">
              <button
                class="btn btn-info btn-sm ms-auto me-auto"
                @click.stop="editRemark()"
              >
                修改备注
              </button>
              <button
                class="btn btn-sm btn-danger ms-auto me-auto"
                @click.stop="setRefundAirlineDone()"
              >
                航司预退
              </button>
            </template>
            <template v-if="detail.status === 32">
              <button
                class="btn btn-danger btn-sm ms-2"
                @click.stop="rollbackStatus()"
                v-if="isAdmin && detail.payStatus !== 2"
              >
                回滚
              </button>
            </template>
            <template
              v-if="detail.airRefundStatus !== 1 && detail.status === 32"
            >
              <button
                class="btn btn-sm btn-danger ms-auto me-auto"
                @click.stop="setRefundFinalAirlineDone()"
              >
                航司已退
              </button>
            </template>
          </div>
          <div class="card-body">
            <button
              type="button"
              class="btn btn-info btn-sm float-end"
              @click.stop="searchHistories()"
            >
              查看操作记录
            </button>
          </div>
          <table class="table table-sm table-striped">
            <thead>
              <tr>
                <th>时间</th>
                <th>内容</th>
                <th>操作人</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="info in histories" :key="info.id">
                <td>{{ info.createTime }}</td>
                <td>{{ info.content }}</td>
                <td>{{ info.operator }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div
          class="tab-pane fade"
          id="smsDetailTab"
          role="tabpanel"
          aria-labelledby="sms-tab"
          v-if="detail !== null && detail.smsDetails.length > 0"
        >
          <sms-detail-list :dataList="detail.smsDetails"></sms-detail-list>
        </div>
      </div>
    </template>

    <my-modal-refund-ticket-update ref="updateRefundModal">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-refund-ticket-update>
    <my-modal-prompt ref="modalPrompt">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-prompt>
    <my-modal-price-update ref="modalUpdatePrice">
      <span slot="title">{{ modalTitle }}</span>
      <span slot="price1Title">{{ price1Title }}</span>
      <span slot="price2Title">{{ price2Title }}</span>
    </my-modal-price-update>
  </div>
</template>

<script>
import {
  searchRefundOrderDetail,
  showRefundOrderStatus,
  showReasonCodeDesc,
  searchRefundOrderHistory,
  searchRefundOrderDetailByOrderNo,
} from "@/api/flight-refund.js";
import {
  processRefund,
  cancelRefund,
  reopenRefund,
  submitRefund,
  setAirRefundAmount,
  setRefundAirlineRefunded,
  setPsgRefundAmount,
  setRefundPassengerRefunded,
  updateRefundOrderPrice,
  updateRefundOrderRemark,
  setAirFinalyRefunded,
} from "@/api/flight-refund.js";
import { rollbackRefundOrderStatus } from "@/api/admin.js";
import { showPayType } from "@/common/common.js";
import MyModalRefundTicketUpdate from "@/components/modal/my-modal-refund-ticket-update.vue";
import MyModalPrompt from "@/components/modal/my-modal-prompt.vue";
import MyModalPriceUpdate from "@/components/modal/my-modal-price-update.vue";
import SmsDetailList from "@/components/list/sms-detail-list_h5.vue";

export default {
  components: {
    MyModalPrompt,
    MyModalRefundTicketUpdate,
    MyModalPriceUpdate,
    SmsDetailList,
  },
  data() {
    return {
      detail: null,
      id: 0,
      refundOrderNo: "",
      histories: [],

      modalTitle: "",
      price1Title: "",
      price2Title: "",
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
    airAmount0: function () {
      if (this.detail.airlineRefundAmount !== null) {
        return this.detail.airlineRefundAmount;
      } else {
        return this.calcAirRefund(this.detail);
      }
    },
    psgAmount0: function () {
      if (this.detail.passengerRefundAmount > 0) {
        return this.detail.passengerRefundAmount;
      } else {
        return this.calcPsgRefund(this.detail);
      }
    },
  },
  mounted: function () {
    this.id = parseInt(this.$route.params.id);
    if (this.id === 0) {
      this.refundOrderNo = this.$route.query.orderNo;
    }

    this.search();
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    search: function () {
      // searchRefundOrderDetail(this.id, (val) => { this.detail = val })
      if (this.id > 0) {
        searchRefundOrderDetail(this.id, (val) => {
          this.detail = val;
        });
      } else {
        searchRefundOrderDetailByOrderNo(this.refundOrderNo, (v) => {
          this.detail = v;
          this.id = this.detail.id;
        });
      }
    },
    searchHistories: function () {
      searchRefundOrderHistory(this.id, (v) => {
        this.histories = v;
      });
    },
    showRefundOrderStatus: function (val) {
      return showRefundOrderStatus(val);
    },
    getReasonCodeDesc: function (val) {
      return showReasonCodeDesc(val);
    },
    commonShowMessage: function (jsonResult) {
      if (jsonResult.status !== "OK") {
        this.showErrMsg("失败：" + jsonResult.errmsg, "danger");
      } else {
        if (jsonResult.desc !== "") {
          this.showErrMsg(jsonResult.desc);
        } else {
          this.showErrMsg("操作成功");
        }
        this.search();
      }
    },
    processRefund: function (id) {
      processRefund(id, (v) => this.commonShowMessage(v));
    },
    setRefundSubmitted: function (id) {
      submitRefund(id, (v) => this.commonShowMessage(v));
    },
    setRefundAirlineAmount: function () {
      this.modalTitle = "航司预计退款金额";
      const info = this.detail;
      const ticketNo = info.balanceCode + "-" + info.ticketNo;
      const psgName = info.psgName;
      const id = info.id;

      this.$refs.updateRefundModal
        .modal(ticketNo, psgName, this.airAmount0)
        .then((info) => {
          setAirRefundAmount(id, info, (v) => this.commonShowMessage(v));
        })
        .catch((ex) => {});
    },
    setRefundAirlineDone: function () {
      if (this.detail.airlineRefundAmount === null) {
        this.showErrMsg("请先填写航司预计实退金额", "danger");
        return;
      }
      this.modalTitle = "确认状态更改为 航司预退 嘛？";
      this.$refs.modalPrompt
        .modal("YesOrNo")
        .then((remark) => {
          setRefundAirlineRefunded(this.id, (v) => this.commonShowMessage(v));
        })
        .catch((ex) => {});
    },
    setRefundFinalAirlineDone: function () {
      // 航司实际退款
      this.modalTitle = "航司实际退款金额";
      const info = this.detail;
      const ticketNo = info.balanceCode + "-" + info.ticketNo;
      const psgName = info.psgName;
      const id = info.id;

      this.$refs.updateRefundModal
        .modal(ticketNo, psgName, info.airlineRefundAmount)
        .then((info) => {
          console.log(info);
          setAirFinalyRefunded(id, info, (v) => this.commonShowMessage(v));
        })
        .catch((ex) => {});
    },
    setRefundPsgAmount: function () {
      this.modalTitle = "实际退客户金额";
      const info = this.detail;
      const ticketNo = info.balanceCode + "-" + info.ticketNo;
      const psgName = info.psgName;
      const id = info.id;

      this.$refs.updateRefundModal
        .modal(ticketNo, psgName, this.psgAmount0)
        .then((info) => {
          setPsgRefundAmount(id, info, (v) => this.commonShowMessage(v));
        })
        .catch((ex) => {});
    },
    setRefundPassengerDone: function () {
      if (this.detail.passengerRefundAmount === null) {
        this.showErrMsg("请先填写实退乘客金额", "danger");
        return;
      }

      this.modalTitle = "确认状态更改为 已退客户 嘛？";
      this.$refs.modalPrompt
        .modal("YesOrNo")
        .then((remark) => {
          setRefundPassengerRefunded(this.id, (v) => this.commonShowMessage(v));
        })
        .catch((ex) => {});
    },
    cancelRefund: function () {
      this.modalTitle = "确定取消退票单吗？";
      this.$refs.modalPrompt
        .modal("YesOrNo")
        .then((remark) => {
          cancelRefund(this.id, (v) => this.commonShowMessage(v));
        })
        .catch((ex) => {});
    },
    reopenRefund: function () {
      this.modalTitle = "确定重新打开该退票单吗？";
      this.$refs.modalPrompt
        .modal("YesOrNo")
        .then((remark) => {
          reopenRefund(this.id, (v) => this.commonShowMessage(v));
        })
        .catch((ex) => {});
    },
    calcAirRefund: function (info) {
      return info.cost - info.airRefundCharge;
    },
    calcPsgRefund: function (info) {
      return info.ticketAmount - info.airRefundCharge - info.serviceCharge;
    },
    calcProfit: function (info) {
      const profit = this.calcAirRefund(info) - this.calcPsgRefund(info);
      return Math.round(profit * 100) / 100;
    },
    calcProfit2: function (t1, t2) {
      return Math.round((t1 - t2) * 100) / 100;
    },
    showPayType: function (val) {
      return showPayType(val);
    },
    editPrice: function () {
      this.modalTitle = "修改价格";
      this.price1Title = "航司退票费";
      this.price2Title = "我司服务费";
      this.$refs.modalUpdatePrice
        .modal(this.detail.airRefundCharge, this.detail.serviceCharge)
        .then((v) => this.doUpdatePrice(v))
        .catch(() => {});
    },
    doUpdatePrice: function (v) {
      const params = {
        airRefundCharge: v.price1,
        serviceCharge: v.price2,
      };

      updateRefundOrderPrice(this.id, params, (v) => this.commonShowMessage(v));
    },
    editRemark: function () {
      this.modalTitle = "请输入新的备注：";
      const promise = this.$refs.modalPrompt.modal();
      promise
        .then((remark) => {
          // 点击确定按钮的回调处理
          if (remark === "") {
            return;
          }
          updateRefundOrderRemark(this.id, { remark: remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((r) => {});
    },
    rollbackStatus: function () {
      this.modalTitle = "确定将状态回滚到 已提交 嘛？";

      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          const params = {
            remark
          }
          rollbackRefundOrderStatus(this.id, params, (v) => this.commonShowMessage(v));
        })
        .catch((ex) => {
          console.log(ex);
        });
    },
  },
};
// 315
</script>